<div id="tb<?php echo $uniqid;?>" class="easyui-panel" style="padding:5px">
    <table class="datagrid-toolbar" cellspacing="0" cellpadding="0" style="padding:5px 10px !important; background: none; border-bottom:none;">
        <tbody>
        <tr>
            <td>
                <div style="padding: 10px 40px;">
                    <div class="display-flex" style="margin-bottom:10px">
                        <div class="goods-image" v-if="goods.image">
                            <el-image :src="goods.image" fit="container">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                        </div>
                        <div class="goods-title">
                            <p>
                                商品名称：{{goods.title}}<br>
                                商品ID：{{goods.id}}；商品价格：￥{{goods.price}}
                            </p>
                            <p>商品状态：<span style="color: #097fad">{{goods.status==='up'?'上架':'下架'}}</span></p>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div class="con"  style="-moz-user-select:none;">
    <table id="agentgoodslog<?php echo $uniqid;?>"></table>
</div>
<div id="agentgoodslog<?php echo $uniqid;?>Dlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>
<script>
    var agentgoodslog<?php echo $uniqid;?>Vm = new Vue({
        el: '#tb<?php echo $uniqid;?>',
        data: {
            goods:JSON.parse('<?php echo addslashes($goods);?>')
        },
        methods: {
            init: function () {
                
            }
        }
    });

    var agentgoodslog<?php echo $uniqid;?>Reload = function () {
        $("#agentgoodslog<?php echo $uniqid;?>").datagrid('load', {id: agentgoodslog<?php echo $uniqid;?>Vm.goods.id});
    };

    var agentgoodslog<?php echo $uniqid;?>Info = function (opt_id) {
        $("#agentgoodslog<?php echo $uniqid;?>Dlg").dialog({
            title: '详情',
            closed: false,
            width: 1080,
            height: 750,
            cache: false,
            href: '/merchant/agentgoodslog/goodsloginfo?id='+opt_id,
            modal: true,
            buttons: [{
                text: '关闭',
                iconCls: 'icon-no',
                handler: function () {
                    $("#agentgoodslog<?php echo $uniqid;?>Dlg").dialog('close');
                }
            }]
        });
    }

    var agentgoodslog<?php echo $uniqid;?>Search = function () {
        var height = $(window).height() - $(".top").height() - 46;
        var width = $(window).width() - $(".leftmenu").width() - 8;
        $("#agentgoodslog<?php echo $uniqid;?>").datagrid({
            title: '代理商品分红设置历史',
            width: width,
            height: height,//高度
            singleSelect: true,//如果为true，则只允许选择一行
            striped: true,//是否显示斑马线效果。
            rownumbers: false,//如果为true，则显示一个行号列。
            pagination: true,//是否显示分页
            pageSize: 10,
            pageList: [10, 20, 50, 100],
            method: 'post',
            sortName: 'created_at',
            sortOrder: 'desc',
            idField: 'id',
            url: '/merchant/agentgoodslog/goodsloglist',
            queryParams: {id:agentgoodslog<?php echo $uniqid;?>Vm.goods.id},
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
            selectOnCheck: false,
            checkOnSelect: true,
            loadMsg:'正在处理，请稍后。。。',
            toolbar: '#tb<?php echo $uniqid;?>',
            columns: [[
                {field:'id',title:'ID', width: fixWidth(3), align: "center", halign: 'center'},
                {field:'event_name',title:'操作类型', width: fixWidth(8), align: "center", halign: 'center'},
                {field:'oper_name',title:'操作人', width: fixWidth(5), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
                    if(rowData.oper_type == '系统' || rowData.oper_type == '未知'){
                        return value;
                    }else{
                        return rowData.oper_type+':'+value+'【id:'+rowData.oper_id+'】';
                    }
                }},
                {field:'created_at',title:'操作时间', width: fixWidth(6), align: "center", halign: 'center',formatter:function (value,rowData,rowIndex){
                        return value?value:'--';
                    }},
                {field: 'options', title: '操作', width: fixWidth(4), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex) {
                        let buttons = '<div class="table">';
                        if(rowData.event != 'del') {
                            buttons += '<span class="l-btn l-btn-small color9 table" style="margin-right: 5px;" onclick="agentgoodslog<?php echo $uniqid;?>Info(\'' + rowData.id + '\')"><span class="l-btn-text">详情</span></span>';
                        }
                        return buttons + '</div>';
                    }},
            ]],
        });
    };
    onDatagridResize("#agentgoodslog<?php echo $uniqid;?>");
    agentgoodslog<?php echo $uniqid;?>Search();
</script>
<style>
    .goods-image {
        width: 60px;
        height: 60px;
        border-radius: 4px;
        border: 1px solid #e6e6e6;
        margin-right: 14px;
    }
</style>